﻿@inject NavigationManager _navigationManager
@inject IProductService _productService

<div class="input-group">
    <input @bind-value="searchText" @bind-value:event="oninput" type="search" list="products" @onkeyup="HandleSearch" class="form-control" placeholder="Search..." @ref="searchInput" />
    <datalist id="products">
        @foreach (var suggestion in suggestions)
        {
            <option>@suggestion</option>

        }
    </datalist>

    <div class="input-group-append">
        <button class="btn btn-primary" @onclick="SearchProducts">
            <span class="oi oi-magnifying-glass"></span>
        </button>
    </div>

</div>


@code {
    private string searchText = string.Empty;
    private List<string> suggestions = new List<string>();
    protected ElementReference searchInput;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await searchInput.FocusAsync();
        }
    }

    public void SearchProducts()
    {
        _navigationManager.NavigateTo($"search/{searchText}/1");

    }

    public async Task HandleSearch(KeyboardEventArgs args)
    {
        if (args.Key == null || args.Key.Equals("Enter"))
        {
            SearchProducts();
        }
        else if (searchText.Length > 1)
        {
            suggestions = await _productService.GetProductsSearchSuggestions(searchText);
        }
    }

}
